<template>
  <Dialog :title="title" :visible="visible" :reveal="reveal" class="two-columns" @close="close">
    <!-- 订单详情 -->
    <UserInfo :info-id="customerId" />
    <div class="margin-span">
      <span style="width: 46%;display: inline-block;">订单编号 {{ orderDetails.dataCode }}</span>
      <span style="width: 43.5%;display: inline-block;">开单时间 {{ orderDetails.createdTime }}</span>
    </div>
    <div class="margin-span">
      <span style="width: 46%;display: inline-block;">开单人 {{ orderDetails.orderMan }}</span>
      <span style="width: 43.5%;display: inline-block;">订单状态 {{ orderDetails.orderStatus }}</span>
    </div>
    <ul>
      <li class="detailed">
        商品清单：
      </li>
      <li v-for="(item,index) of orderDetails.orderList" :key="index" class="lisTop">
        <el-row style="width:5%">
          {{ index+1 }}
        </el-row>
        <el-row style="width:95%">
          <el-row type="flex">
            <el-col :span="22" class="product">
              <el-button class="bg" type="text">{{ item.productAttrib.slice(0,2) }}</el-button>
              <p style="margin:0px 10px;">{{ item.projectName }}</p>
              <el-button v-if="item.productAttrib==='套餐类'" class="bg" type="text" @click="seeData(item)">详情</el-button>
            </el-col>
            <el-col v-if="item.productAttrib!=='充值'" :span="1">x {{ item.contentCount }}</el-col>
          </el-row>
          <el-row v-if="item.productAttrib!=='充值'" class="grey">
            <span v-if="item.productAttrib!=='套餐类'" class="margin-right">规格：{{ item.specl }}</span>
            <span v-if="item.productAttrib!=='套餐类'" class="margin-right">单位：{{ item.unit }}</span>
            <span>使用次数：{{ item.contentCount }}</span>
          </el-row>
          <el-row type="flex" class="price">
            <el-col>
              售价：￥{{ item.price }}
            </el-col>
            <el-col v-if="item.discountRate">
              折扣率：{{ item.discountRate }}%
            </el-col>
            <el-col v-if="item.discountRate">
              折后价：￥{{ item.discountPrice }}
            </el-col>
            <el-col>
              主治医生：{{ item.attendingDoctor?item.attendingDoctor:"未指定" }}
            </el-col>
          </el-row>
        </el-row>
      </li>
    </ul>
    <el-row style="overflow: hidden;">
      <el-col :offset="18" :span="7">总额：￥{{ orderDetails.orderList | calculatePrice(1) }}</el-col>
      <el-col :offset="18" :span="7">优惠：-￥{{ orderDetails.orderList | calculatePrice(2) }}</el-col>
      <el-col :offset="18" :span="7">合计：<span class="span">￥{{ orderDetails.orderList | calculatePrice(3) }}</span></el-col>
    </el-row>
    <el-row style="margin-bottom: 21px">
      <el-col>付款方式： {{ orderDetails.orderPaymentStyle }}</el-col>
      <el-col v-if="orderDetails.orderPaymentStyle!=='全款'" :span="6">定金支付： {{ orderDetails.depositAmount }}元</el-col>
      <el-col v-if="orderDetails.orderPaymentStyle!=='全款'" :span="6">尾款支付： {{ orderDetails.balancePayment }}元</el-col>
      <el-col v-if="orderDetails.orderStatus==='已退款'">退款金额：￥{{ orderDetails.refundAmount }}</el-col>
    </el-row>
    <!-- <el-row class="el-row-yy">
      <el-button class="submitButton" @click="close">关闭</el-button>
    </el-row> -->
    <el-dialog width="40%" title="套餐详情" :visible.sync="innerVisible" append-to-body>
      <mealDetails :details-id="detailsId" />
    </el-dialog>
  </Dialog>
</template>
<script>
import Dialog from '@/components/Dialog';
import UserInfo from '@/components/UserInformation';
import { calculatePrice } from '@/api/fifters.js';
import mealDetails from "@/components/mealDetails";
export default {
  components: {
    Dialog,
    UserInfo,
    mealDetails,
  },
  filters: {
    calculatePrice(arr, number) {
      return calculatePrice(arr, number);
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    orderDetailsId: {
      type: [Number, String],
      default: '',
    },
    customerId: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      title: '查看订单详情',
      reveal: false,
      orderDetails: {},
      innerVisible: false,
      detailsId: [],
    };
  },
  watch: {
    orderDetailsId: {
      handler(newId) {
        this.fetchDetail(newId);
      },
      deep: true,
    },
  },
  methods: {
    async seeData(row) {
      this.detailsId = row.projectId;
      this.innerVisible = true;
    },
    close() {
      this.$emit('seeDetails', false);
    },
    fetchDetail(id) { // 获取订单详情
      this.$api['doctor/consulting/orderDetail']({ id }).then(res => {
        if (res.code !== 200) return;
        console.log(res, "详情orderDetails");
        this.orderDetails = res.data;
        console.log("订单详情", this.orderDetails);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import './order.scss';
.el-row,
span {
  line-height: 45px;
}
li {
  display: flex;
  margin-bottom: 15px;
}
.margin-span>span{
  margin: 0 10px;
}
.el-dialog:not(.is-fullscreen) {
    width: 800px !important;
}
.margin-span>span {
    margin: 0;
}
.el-col-offset-18 {
    padding-left: 33px;
}
.margin-right{
  margin-right: 18px;
.submitButton{
  width: 150px !important;
  height: 30px !important;
  background: #0278DC;
  border-radius: 4px;
  color:#fff;
}
.el-row-yy{
  display: flex;
  justify-content: center;
}
}
</style>
